﻿﻿<!-- #layout name=noMenu --sideType='domain'-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Site binding</h1>
  </div>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" @click.stop="onAdd"><span>New</span> <i class="fa fa-plus"></i></a>
      <a v-if="tableDataSelected.length > 0" @click.stop="onDelete" class="btn red navbar-btn">Delete</a>
    </div>
  </div>
  <kb-table :show-select="true" :data="tableData" :selected.sync="tableDataSelected">
    <kb-table-column :label="Kooboo.text.site.domain.name">
      <template v-slot="row">
        {{row.fullName}}
      </template>
    </kb-table-column>
  </kb-table>

  <div class="modal fade" data-backdrop="static" data-keyboard="false" v-kb-modal="modalShow">
    <div class="modal-dialog" v-if="modalShow">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="cancelDialog" type="button" class="close">
            <i class="fa fa-close"></i>
          </button>
          <h4 class="modal-title">New binding</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-md-3 control-label">Binding to</label>
              <div class="col-md-9" k-if="kooboosetting.IsLocal = true">
                <label class="radio-inline">
                  <input type="radio" name="defaultBinding" :checked="defaultBinding =='domain'"
                    @click="defaultBinding='domain'" /><span>Domain</span>
                </label>
                <label class="radio-inline">
                  <input type="radio" name="defaultBinding" :checked="defaultBinding =='port'"
                    @click="defaultBinding='port'" /><span>Port</span>
                </label>
              </div>
            </div>
            <div class="form-group" k-if="kooboosetting.IsLocal = true">
              <div class="col-md-9 col-md-offset-3">
                <kb-form :model="formModel" align="inline" ref="form">
                  <kb-form-item v-if="defaultBinding === 'domain'">
                    <div>
                      <div class="input-group">
                        <input v-model="formModel.subdomain" class="form-control" name="SubDomain"
                          placeholder="example: www" type="text" />
                        <span class="input-group-addon">.</span>
                        <select v-kb-hint="validateModel.subdomain.msg" v-model="formModel.root" class="form-control"
                          name="RootDomain">
                          <option v-for="item in rootDomain">{{ item.domainName }}</option>
                        </select>
                      </div>
                    </div>
                  </kb-form-item>

                  <kb-form-item v-if="defaultBinding === 'port'">
                    <div>
                      <div>
                        <input v-kb-hint="validateModel.port.msg" v-model.number="formModel.port" class="form-control"
                          placeholder="example: 81" type="number" min="0" />
                      </div>
                    </div>
                  </kb-form-item>
                </kb-form>
              </div>
            </div>
            <div class="form-group" k-if="kooboosetting.IsLocal = false">
              <div class="col-md-9 col-md-offset-3">
                <kb-form :model="formModel" align="inline">
                  <kb-form-item v-if="defaultBinding === 'domain'">
                    <div class="input-group">
                      <input v-model="formModel.subdomain" class="form-control" name="SubDomain"
                        placeholder="example: www" type="text" />
                      <span class="input-group-addon">.</span>
                      <select v-kb-hint="validateModel.subdomain.msg" class="form-control" name="RootDomain">
                        <option v-for="domain in rootDomain">{{ domain.domainName }}</option>
                      </select>
                    </div>
                  </kb-form-item>
                </kb-form>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="onSave" class="btn green">Add</button>
          <button @click="cancelDialog" class="btn gray">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .col-md-offset-3 .form-group {
    margin: auto;
  }
</style>
<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script>
  $(function () {
    var self;
    new Vue({
      el: "#app",
      data: function () {
        return {
          tableData: [],
          tableDataSelected: [],
          modalShow: false,
          defaultBinding: "domain",
          formModel: {
            subdomain: "",
            port: 81,
            root: ""
          },
          validateModel: undefined,
          formRules: {
            subdomain: [
              {
                pattern: /^([A-Za-z][\w\-\.]*)*$/,
                message: Kooboo.text.validation.objectNameRegex
              },
              {
                min: 1,
                max: 63,
                message:
                  Kooboo.text.validation.minLength +
                  0 +
                  ", " +
                  Kooboo.text.validation.maxLength +
                  63
              },
              {
                validate: function (value) {
                  var exist = _.map(self.domainsData, function (dm) {
                    return dm.fullName;
                  });
                  if (
                    exist.indexOf(
                      self.formModel.subdomain + "." + self.formModel.root
                    ) > -1
                  ) {
                    return false;
                  }
                  return true;
                },
                message: Kooboo.text.validation.taken
              },
              {
                remote: {
                  url: Kooboo.Site.CheckDomainBindingAvailable(),
                  data: function () {
                    return {
                      SubDomain: self.formModel.subdomain,
                      RootDomain: self.formModel.root
                    };
                  }
                },
                message: Kooboo.text.validation.taken
              }
            ],
            port: [
              { required: Kooboo.text.validation.required },
              {
                pattern: /^\d*$/,
                message: Kooboo.text.validation.invaildPort
              },
              {
                min: 0,
                max: 65535,
                message: Kooboo.text.validation.portRange
              }
            ]
          }
        };
      },
      created: function () {
        self = this;
        self.getTableData();
        this.getDomainData();
        self.createValidateModel();
      },
      watch: {
        formModel: {
          handler: function () {
            self.createValidateModel();
          },
          deep: true
        },
        defaultBinding: function () {
          self.createValidateModel();
        }
      },
      methods: {
        createValidateModel: function () {
          this.validateModel = {
            subdomain: { valid: true, msg: "" },
            port: { valid: true, msg: "" }
          };
        },
        getTableData: function () {
          Kooboo.Binding.listBySite().then(function (res) {
            if (res.success) {
              self.tableData = res.model;
            }
          });
        },
        onDelete: function () {
          if (confirm(this.getConfirmMessage(this.tableDataSelected))) {
            var ids = this.tableDataSelected.map(function (m) {
              return m.id;
            });

            Kooboo[Kooboo.Binding.name]
              .Deletes({
                ids: ids
              })
              .then(function (res) {
                if (res.success) {
                  self.getTableData();
                  self.cancelDialog();
                  window.info.done(Kooboo.text.info.delete.success);
                } else {
                  window.info.done(Kooboo.text.info.delete.fail);
                }
              });
          }
        },
        getConfirmMessage: function (doc) {
          if (doc.relations) {
            var reorderedKeys = _.sortBy(Object.keys(doc.relations));
            doc.relationsTypes = reorderedKeys;
          }
          var find = _.find(doc, function (item) {
            return item.relations && Object.keys(item.relations).length;
          });

          if (!!find) {
            return Kooboo.text.confirm.deleteItemsWithRef;
          } else {
            return Kooboo.text.confirm.deleteItems;
          }
        },
        getDomainData: function () {
          Kooboo.Domain.getList().then(function (res) {
            self.rootDomain = res.model;
            if (self.rootDomain.length > 0) {
              self.formModel.root = self.rootDomain[0].domainName;
            }
          });
        },
        onSave: function () {
          var valid = true;
          if (self.defaultBinding === "domain") {
            self.validateModel.subdomain = Kooboo.validField(
              self.formModel.subdomain,
              self.formRules.subdomain
            );
            if (!self.validateModel.subdomain.valid) {
              valid = false;
            }
          } else if (self.defaultBinding === "port") {
            self.validateModel.port = Kooboo.validField(
              self.formModel.port,
              self.formRules.port
            );
            if (!self.validateModel.port.valid) {
              valid = false;
            }
          }
          if (valid) {
            Kooboo.Binding.post({
              subdomain: self.formModel.subdomain,
              rootdomain: self.formModel.root,
              port: self.formModel.port + "",
              defaultBinding: self.defaultBinding === "port"
            }).then(function () {
              self.getTableData();
              self.cancelDialog();
            });
          }
        },
        onAdd: function () {
          this.modalShow = true;
        },
        cancelDialog: function () {
          this.modalShow = false;
          this.formModel.subdomain = "";
          this.formModel.port = 81;
          this.defaultBinding = "domain";
        }
      }
    });
  });
</script>